<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        #modal {
            height: 200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="open">打开弹框</button>
    <button id="close">关闭弹框</button>
    <script>

        // const Modal = function() {
        //     // dom  -> body 
        //     this.modalBox = document.createElement('div');
        //     this.modalBox.id = 'modal';
        //     this.modalBox.style.display = 'none';
        //     this.modalBox.innerText = '我是一个全局唯一的Modal';
        //     document.body.appendChild(this.modalBox);
        // }
        // let modal = new Modal(); // 直接实例化 Modal 
        // 点不点按钮 出发登录相关权限与否 ，modal 框是不是就已经挂载到页面上了？

        // modal 不是要提前存在的，
        // modal 第一次  生产  + 显示
        // 2....n 显示
        let modal = document.createElement('div');
        modal.id = 'modal'
        modal.style.display = 'none';
        modal.innerText = '我是一个全局唯一的Modal';
        document.body.appendChild(modal);

        const openButton = document.getElementById('open'),
            closeButton = document.getElementById('close');

        openButton.addEventListener('click', function () {
            // 弹出框显示出来
            modal.style.display = 'block';
        });
        closeButton.addEventListener('click', function () {
            // 已经显示的弹出框隐藏掉
            modal.style.display = 'none';
        });
    </script>
</body>

</html>